<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知遇——让知识遇见更好的自己</title>
    <script src="js/jquery-3.5.1.js"></script>
    <link rel="shortcut icon" href="images/ico.png">
    <style>
        @keyframes bgbody {
            0%{
                opacity: 0;
                background-color: #333;
            }
            100%{
                opacity: 1;
            }
        }
        body,html{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            /* cursor: default; */
            /* display: block; */
            /* overflow: hidden; */
            animation: bgbody 1.5s ease;
        }
        img{
            transition: all 1s;
        }
        #top{
            /* background-color: transparent; */
            top: 0;
            width: 100%;
            height: 200px;
            position:relative;
            z-index: -10;
        }
        #topbg{
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: -1;
            color: transparent;
            background-image: url(images/主页bg.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            transition: opacity 1s;
        }
        #navs{
            width: 100%;
            height: 100px;
            position: absolute;
            top: 0;
            z-index: 100;
            transition: background-color 0.2s,position .2s,box-shadow 0.3s,height 0.3s;
        }
        #nav{
            position: absolute;
            width: 1200px;
            height: 100px;
            left: 50%;
            top: 0;
            transform:translate(-50%,0);
        }
        #nav .navlog{
            float: left;
        }
        #nav .navbox{
            float: right;
            line-height: 50px;
        }
        #nav .navbox li{
            float: left;
            position: relative;
            list-style: none;
            margin-right: 20px;
            margin-left: 30px;
            margin:20px 30px;
            padding:0 5px;
            /* border-bottom:2px solid  transparent; */
            /* border-bottom: 2px solid red; */
            transition:border 0.25s;
        }
        #nav .navbox li ::after{
            content: "";
            position: absolute;
            bottom: -1px;
            left: -1px;
            right: -1px;
            top: -1px;
            transform:scale(0, 1);
            transition: all 0.3s;
            border-bottom: 2px solid rgb(67,149,255);
        }
        #nav .navbox li:hover ::after{
            transform:scale(1);
            transition:all .3s;
        }
        #nav .navbox li a{
            text-decoration:none;
            color: white;
            font-size: 18px;
            font-family: microsoft yahei light,microsoft yahei,Helvetica,sans-serif,等线;
        }
        #topTitle{
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-90%);
            text-align: center;
        }
        #topTitle h1{
            width: 1000px;
            font-family: microsoft yahei;
            font-weight: 400;
            font-size: 65px;
            color: #fff;
            cursor: Default;
        }
        .underline {
            position: relative;
            left:50%;
            transform: translate(-50%,0);
            margin-top: 20px;
            width: 70px;
            border-bottom: 4px solid rgb(67,149,255);
            margin-bottom: 50px;
        }
        #topTitle p{
            color: white;
            text-align: center;
        }
        #topTitle input{
            position: absolute;
            top: 300px;
            left: 50%;
            width: 230px;
            transform: translate(-50%,0);
            outline: none;
            border: none;
            padding: 13px 15px;
            border-radius: 30px;
            color: rgba(255,255,255,.8);
            font-size: small;
            font-weight: 400;
            font-family: microsoft yahei,sans-serif;
            text-align: center;
            background-color:rgba(255,255,255,.25);
            box-shadow: rgba(0,0,0,.2) 0 0 10px;
            transition:width 0.5s,color 0.5s;
        }
        
        #scrollDown{
            position: absolute;
            top:100%;
            left: 50%;
            transform: translate(0,-50%);
            margin-top: -80px;
        }
        #scrollDown .scrollDownicon{
            /* position: relative;
            left: 50%;
            margin-left: -10px;
            margin-top: 30px; */
            display:block;
            border-right: 3px solid rgba(255,255,255,.5);
            border-top: 3px solid rgba(255,255,255,.5);
            height: 20px;
            width: 21px;
            transform: rotate(135deg);
            cursor: pointer;
        }
        #article{
            top: 100%;
            position: relative;
            width: 100%;
            height:1000px;
            background-color:#f1f4f7;
            min-height: 100px;
            box-sizing: border-box;
            padding: 120px;
        }
        #article .articleTitle{
            position: relative;
            margin-top: 20px;
            left: 50%;
            width: 1200px;
            height:60px;
            padding-bottom: 30px;
            transform: translateX(-50%);
            color: rgba(0,0,0,.1);
            font-size: 50px;
            font-weight: 700;
            font-family: "黑体",cursive;
        }
        #article .articleTitle .articleTitles{
            position:absolute;
            width: 1200px;
            height:60px;
            line-height: 50px;
            top: 0;
            /* font-weight: 400; */
            
            padding-left: 110px;
            box-sizing: border-box;
        }
        #article .articleTitle .articleTitles a{
            letter-spacing:3px;
            font-family:weiruanyahei;
            font-size: 22px;
            color:  rgba(25,161,253,1);
            text-decoration: none;
            transition: all 0.4s;
        }
        #article .articleTitle .articleTitles a:hover{
            color:  rgba(13, 105, 224, 0.9);

        }
        #article .articles{
            width: 1200px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        #article .atLeft{
            float: left;
            width: 690px;
            margin-left:15px;
            margin-top:15px;
            background-color: white;
        }
        #article .atLeft .atImg1{
            overflow: hidden;
            width: 690px;
            height: 410px;
        }
        #article .atLeft img{
            width: 690px;
            height: 410px;
        }
        #article .atLeft img:hover{
            transform: scale(1.1); 
        }
        #article .atLeft .atText{
            width: 690px;
            height: 160px;
            padding: 20px 30px;
            box-sizing: border-box;
        }
        #article .atLeft .atTexta{
            width: 600px;
            margin-bottom: 20px;
            height: 70px;
            line-height: 35px;
        }
        #article .atLeft .atTexta a{
            font-size: 32px;
            font-weight: 700;
            color: black;
            letter-spacing:1px;
            text-decoration: none;
            transition: all .7s;
        }
        #article .atLeft .atTexta a:hover{
            color: rgb(25,167,253);
        }
        #article .atLeft .atWriter{
            color:rgba(10,10,10,0.7)
        }
        #article .atLeft .atWriter a{
            font-weight: 800;
            color: black;
            letter-spacing:1px;
            text-decoration: none;
            transition: all .7s;
        }
        #article .atLeft .atWriter a:hover{
            color:rgb(25,167,253);
        }
        #article .atRight{
            float: right;
            height: 200px;
            width: 460px;
        }
        #article .atRight .atdivs{
            position: relative;
            width: 460px;
            height: 130px;
            margin-bottom: 30px;
            /* padding-right: 60px; */
            /* box-sizing: border-box; */
        }
        #article .atRight .atdivs .atImg2{
            float: left;
        }
        #article .atRight .atdivs img{
            width: 130px;
            height: 130px;
            float: left;
            object-fit: cover;
        }
        #article .atRight .atdivs .atText2{
            float: left;
            margin-left: 20px;
        }
        #article .atRight .atdivs .atText2 .atTexta{
            width: 240px;
            margin-top: 10px;
            margin-bottom: 4px;
            max-height: 78px;
        }
        #article .atRight .atdivs .atText2 a{
            font-size: 18px;
            line-height: 26px;
            font-weight: 700;
            color: #000;
            text-decoration: none;
            transition: all .3s;
        }
        #article .atRight .atdivs .atText2 a:hover{
            color: rgb(25,167,253);
        }
        #article .atRight .atdivs .atText2 .atTextp{
            background-color: rgb(25,167,253);
            height:22px;
            line-height: 22px;
            /* box-sizing: border-box; */
            padding:1px 15px;
            border-radius: 15px;
            /* font-weight: 700; */
            color:white;
            letter-spacing:2px;
            display: inline-block;
        }
        
        #article .atRight .atdivs .atText2 .atWriter{
            font-size: 13px;
            color: rgba(10,10,10,0.7);
        }
        #article .atRight .atdivs .atText2 .atWriter a{
            font-size: 13px;
            transition: all .3s;
        }
        #article .atRight .atdivs .atText2 .atWriter a:hover{
            color: rgb(25,167,253);
        }
        #middle .opitions{
            width: 1170px;
            height: 180px;
            background-color: white;
            border-radius: 5px;
            box-shadow: rgba(0,0,10,.1) 0 2px 10px;
            position: absolute;
            left:50%;
            top: 100%;
            margin-top: -120px;
            transform: translate(-50%);
            z-index: 2;
            box-sizing: border-box;
        }
        #middle .opitions .opIcons{
            width: 1020px;
            height: 180px;
            float: left;
            overflow: hidden;
        }
        #middle .opitions .opIconss{
            width: 3060px;
            height: 180px;
            float: left;
            margin-left: -1020px;
            transition: all .3s ease;
        }
        #middle .opitions .opIcon{
            float: left;
            width: 170px;
            height: 180px;
            position: relative;
            border-left: 1px solid rgba(231, 231, 231, 0.548);
            box-sizing: border-box;
            transition: background-color .3s;
        }
        
        #article h2{
            width: 100%;
            height: 50px;
            line-height: 50px;
            position: relative;
            color: #242424;
            font-size: 36px;
            font-family: 等线;
            font-weight: 700;
            letter-spacing:3px;
            text-align: center;
            margin-bottom: 10px;
        }
        #middle .opitions .opIcon svg{
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 30px;
        }
        
        #middle .opitions .opIcon h3{
            text-align: center;
            font-weight: 600;
            color: #555;
            font-family: 等线;
        }
        #middle .opitions  .opIcon:hover{
            background-color: rgb(240,243,246);
        }
        #middle .opitions .opIcon::after{
            content: "";
            position: absolute;
            bottom: -2px;
            left: -2px;
            right: -2px;
            top: -2px;
            transform:scale(0,1);
            transition: all 1s;
            /* border-top: 1px solid red; */
            border-right: 2px solid red;
        }
        #middle .opitions .opIcon:hover ::after{
            transform:scale(1);
            transition:all 1s;
        }
        #middle .opitions .opleft{
            position: relative;
            float: left;
            width: 75px;
            height: 180px;
        }
        #middle .oplefticon{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: #dee2e8;
            height: 45px;
            width: 45px;
            border-radius: 50%;
            border: 0;
            text-align: center;
            color: #fff;
            font-size: 22px;
            line-height: 45px;
            font-weight: 700;
            opacity: 1;
            margin: 0;
            transition: all .5s;
        }
        #middle .opitions .oplefticon:hover{
            background: rgb(67,149,255);
        }
        #middle .opitions .opleft svg{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        #middle .opitions .opright svg{
            position: absolute;
            top: 25%;
            left: 30%;
            transform: translate(-50%,-50%);
            transform: rotate(180deg);
        }
        #middle .opitions .opleft .op{
            left:20px
        }
        #middle .opitions .opright .op{
            left:10px
        }
        #middle .opitions .opright{
            float: right;
            width: 75px;
            height: 180px;
            position: relative;
        }
        #middle{
            position: relative;
            top: 100%;
            width: 100%;
            height:620px;
            
        }
        
        #middle .middle-bg{
            position: absolute;
            top: 0px;
            left: 50%;
            width: 525px;
            height: 382px;
            transform: translateX(-50%);
            background-image: url(images/middle-bg.png);
            background-repeat: no-repeat;
            z-index: -1;
            transition:all 0.3s linear ;
        }
        #middle .middle-logo img{
            position: relative;
            left: 50%;
            margin-top: 100px;
            transform: translateX(-50%);
            font-family: "Sacramento",cursive;
        }
        #middle h1{
            text-align: center;
            font-size: 70px;
            color: white;
            line-height: 85px;
            margin: 0;
            padding-top: 20px;
        }
        #topic{
            position: relative;
            top: 100%;
            width: 100%;
            height:1500px;
            background-color:rgb(244,245,249);
            box-sizing: border-box;
            padding: 60px;
            /* background-image: url(images/abg.jpg); */
        }
        #topic .topicTitle{
            position: relative;
            margin-top: 20px;
            margin-bottom: 20px;
            left: 50%;
            width: 1200px;
            height:60px;
            transform: translateX(-50%);
            color: rgba(0,0,0,.1);
            font-size: 50px;
            font-weight: 700;
            font-family: "黑体",cursive;
        }
        #topic .topicTitle .topicTitles{
            position:absolute;
            width: 1200px;
            height:60px;
            line-height: 50px;
            top: 0;
            /* font-weight: 400; */
            
            padding-left: 110px;
            box-sizing: border-box;
        }
        #topic .topicTitle .topicTitles a{
            letter-spacing:3px;
            font-family:weiruanyahei;
            font-size: 22px;
            color:  rgba(25,161,253,1);
            text-decoration: none;
            transition: all 0.4s;
        }
        #topic .topicTitle .topicTitles a:hover{
            color:  rgba(13, 105, 224, 0.9);

        }
        #topic .topicmain,.topicmain2{
            width: 1200px;
            height: 410px;
            position: absolute;
            left: 50%;
            margin-top: 30px;
            transform: translateX(-50%);
            background-color: white;
            border-radius: 10px;
            
        }
        #topic .topicmain{
            z-index:98;
            opacity: 1;
            transition: all 1s;
        }
        #topic .topicmain2{
            z-index:97;
            opacity: 0;
            transition: all 1s;
        }
        #topic .topicmainimg{
            width: 580px;
            height: 410px;
            overflow: hidden;
            float: right;
        }
        #topic  img{
            float: right;
            width: 580px;
            height: 410px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            object-fit: cover;
        }
        #topic .topicmainimg img:hover{  
            transform: scale(1.1);  
        }
        #topic  .topicText {
            float: left;
            width: 600px;
            height: 410px;
            box-sizing: border-box;
            padding: 30px;
        }
        #topic  .topicText .topicLabel{
            display: inline-block;
            height: 30px;
            line-height: 30px;
            font-size: 18px;
            font-family: heiti;
            box-sizing: border-box;
            padding:0 18px;
            color: white;
            background-color: rgb(25,161,253);
            border-radius: 25px;
            letter-spacing: 4px;
        }
        #topic  .topicText .topicTitle1{
            width: 560px;
            height: 80px;
            margin:20px 0px;
            font-weight: 700;
            transform: all .5s;
            
        }
        #topic  .topicText .topicTitle1 a{
            text-decoration: none;
            color: #000;
            font-size: 32px;
            line-height: 1.3;
            font-weight: 700;
            transition: all .5s;
        }
        #topic  .topicText .topicTitle1 a:hover{
            color: rgb(25,161,253);
        }
        #topic  .topicText .topicInf{
            width: 500px;
            height: 30px;
            line-height: 30px;
            margin:20px 0px;
            color: #717375;
            font-size: 15px;
            position: relative;
            /* background-color: rgb(116, 248, 248); */
        }
        #topic  .topicText .topicInf svg{
            position: relative;;
            top: 50%;
            transform: translateY(-50%);
        }
        #topic  .topicText .topicContent{
            width: 540px;
            height: 70px;
            margin:20px 0px;
            /* background-color: rgb(72, 223, 117); */
            color: #717375;
            font-size: 15px;
            line-height: 1.4;
            font-family: weiruanyahei;
            font-weight: 500;
        }
        #topic  .topicText .topicAuthor{
            width: 300px;
            height: 50px;
            /* background-color: rgb(188, 223, 72); */
        }
        #topic  .topicText .topicAuthor img{
            width: 50px;
            height: 50px;
            border-radius: 5px;
            float: left;
        }
        #topic  .topicText .topicAuthor .topicAuthorName{
            height: 24px;
            width: 200px;
            line-height: 24px;
            font-size: 18px;
            font-weight: bolder;
            padding-left:70px ;
            letter-spacing:2px;
            margin-bottom: 6px;
        }
        #topic  .topicText .topicAuthor .topicAuthorIntroduce{
            height: 20px;
            width: 200px;
            font-size: 15px;
            padding-left:70px ;
            color: #717375;
            letter-spacing:1px
        }
        #topic  .topicText .topicAuthor #topicchange{
            position: absolute;
            top: 100%;
            margin-top: -40px;
            margin-left:500px
        }
        #topic .topicother{
            position: absolute;
            width: 1200px;
            left: 50%;
            transform:translateX(-50%);
            top:650px;
        }
        #topic .topicother .topicotherLeft{
            float: left;
            width: 800px;
            height: 100px;
        }
        #topic .topicother .topicotherLefts{
            width: 800px;
            height: 100px;
        } 
        #topic .topicother .topicotherRight{
            float: right;
            width: 370px;
            height: 620px;
            background-color:white;
            border-radius: 5px;
            box-sizing: border-box;
            padding:30px;
            box-shadow: 0 0 40px 0 rgba(0,0,0,0.05);
        }
        #topic .topicother .topicotherRight .topicotherSpan{
            height: 35px;
            line-height: 35px;
        }
        #topic .topicother .topicotherRight span{
            font-size: 22px;
            /* font-weight: bolder; */
            margin-right: 18px;
            letter-spacing: 2px;
            transition: all .2s;
            overflow: hidden;
        }
        #topic .topicother .topicotherRight span:first-child{
            font-size: 28px;
            color: #495057;;
        }
        
        #topic .topicother .topicotherRight span:hover{
            color: rgb(25,161,253);
        }
        #topic .topicother .topicotherRight .topicotherhot,.topicotherrecommend{
            position: absolute;
            transition: all .5s;
        }
        .topicotherhot{
            opacity: 1;
            z-index: 98;
        }
        .topicotherrecommend{
            opacity: 0;
            z-index: 97;
        }
        #topic .topicother .topicotherRight .topicotherSmall{
            margin: 30px 0px;
            width: 310px;
            height: 100px;
            /* background-color: rgba(25,161,253,0.5);  */
        }
        #topic .topicother .topicotherRight .topicotherSmall img{
            width: 120px;
            height: 100px;
            float: left;
            border-radius: 5px;
        }
        #topic .topicother .topicotherRight .topicotherSmall .topicotherSmalllabel{
            height: 24px;
            line-height: 24px;
            color: white;
            margin-left: 10px;
            border-radius: 16px;
            background-color: rgb(25,161,253);
            padding: 0px 15px;
            font-size: 14px;
            display: inline-block;
        }
        #topic .topicother .topicotherRight .topicotherSmall .topicotherSmalltitle{
            height: 50px;
            line-height: 24px;
            margin-left: 130px;
            margin-top: 5px;
        }
        #topic .topicother .topicotherRight .topicotherSmall .topicotherSmalltitle a{
            font-size: 18px;
            letter-spacing: 1px;
            text-decoration: none;
            color: #000;
            font-weight: bolder;
        }
        #topic .topicother .topicotherRight .topicotherSmall .topicotherSmalltime{
            height: 20px;
            font-size: 14px;
            color: #889097;
            letter-spacing: 1px;
            margin-left: 130px;
            margin-top: 5px;
        }
        #button{
            position: relative;
            top: 100%;
            width: 100%;
            height:320px;
        }
        #button .buttons{
            position: relative;
            width: 1000px;
            height: 320px;
            left: 50%;
            transform: translateX(-50%);
            padding-left: 100px;
        }
        #button .buttons .buttonLogo{
            position: relative;
            width: 240px;
            top: 50%;
            transform: translateY(-60%);
            color:white;
            font-size: 22px;
            float: left;
        }
        #button .buttons .buttonLogo p{
            margin: 0;
            text-align: center;
        }
        #button .buttons .buttonText{
            position: relative;
            width: 300px;
            top: 50%;
            transform: translateY(-60%);
            color:white;
            font-size: 22px;
            float: left;
            text-align: center;
            font-size: 16px;
        }
        #button .buttons .buttonHerf{
            position: relative;
            width: 200px;
            float: left;
            top: 50%;
            transform: translateY(-60%);
            list-style: none;
            color: white;
            font-size: 18px;
            text-align: center;
        }
        #button .buttons .buttonHerf li{
            margin: 20px;
        }
        #button .buttons .buttonJoin{
            position: relative;
            width: 200px;
            float: left;
            top: 50%;
            transform: translateY(-60%);
            list-style: none;
            font-size: 18px;
            text-align: center;
        }
        #button .buttons a{
            text-decoration: none;
            color: white;
            transition: all .3s;
        }
        #button .buttons a:hover{
            color: rgb(25,167,253);
        }
    </style>
    <script>
        var searchflag=1
        var middleflag=1
        var middlelfet=0
        var topicchangeflag=1
        function searchmov(obj){
            if(searchflag){
                obj.style.width='400px'
                obj.style.backgroundColor='rgba(255,255,255,.55)'
            }
        }
        function searchout(obj){
            if(searchflag){
                obj.style.width='230px'
                obj.style.backgroundColor='rgba(255,255,255,.25)'
            }
        }
        function searchclick(obj,e){
            obj.style.width='400px'
            obj.style.backgroundColor='rgba(255,255,255,.55)'
            searchflag=0
            window.event ? window.event.cancelBubble = true : e.stopPropagation();
        }
        function searchunclick(obj){
            $('input')[0].style.width='230px'
            obj.style.backgroundColor='rgba(255,255,255,.25)'
            searchflag=1
        }
        window.onload =function(){
            $('#scrollDown').click(function(){
                // console.log(window.innerHeight) 
                s=window.innerHeight-40
                $('html,body').animate({scrollTop:s+'px'});
            })
            $('.oplefticon').eq(0).click(function(){
                let l=(parseInt($('.opIconss').eq(0).css("marginLeft"))+170)
                // console.log(l)
                if(l>=0){
                    $('.opIconss').eq(0).css("marginLeft",'-1020px')
                }
                else{
                    $('.opIconss').eq(0).css("marginLeft",l+'px')
                }
            })
            $('.oplefticon').eq(1).click(function(){
                let l=(parseInt($('.opIconss').eq(0).css("marginLeft"))-170)
                // console.log(l)
                if(l<=-2040){
                    $('.opIconss').eq(0).css("marginLeft",'-1020px')
                }
                else{
                    $('.opIconss').eq(0).css("marginLeft",l+'px')
                }
            })
            setInterval(function(){
                if(middleflag==1){
                    middlelfet+=5
                    // console.log(middlelfet)
                }
                else{
                    middlelfet-=5
                    // console.log(middlelfet)
                }
                $('.middle-bg').eq(0).css('marginLeft',middlelfet+'px')
                if(middlelfet>=20 || middlelfet<=-20){
                    middleflag=-middleflag
                }
            },300)
            $('#topicchange svg').click(function(){
                if(topicchangeflag){
                    topicchangeflag=0
                    $('.topicmain2').css('z-index','99')
                    $('.topicmain2').css('opacity','1')
                    $('.topicmain2').css('z-index','98')
                    $('.topicmain2').css('opacity','0')
                }
                else{
                    topicchangeflag=1
                    $('.topicmain2').css('z-index','98')
                    $('.topicmain2').css('opacity','0')
                    $('.topicmain2').css('z-index','99')
                    $('.topicmain2').css('opacity','1')
                }
            })
            $('.topicotherSpan span').eq(0).click(function(){
                $(this).css('font-size','28px')
                $(this).css('color','#495057')
                $('.topicotherSpan span').eq(1).css('font-size','22px')
                $('.topicotherSpan span').eq(1).css('color','#000')
                $('.topicotherhot').css('z-index','99')
                $('.topicotherhot').css('opacity','1')
                $('.topicotherrecommend').css('z-index','98')
                $('.topicotherrecommend').css('opacity','0')
            })
            $('.topicotherSpan span').eq(1).click(function(){
                $('.topicotherSpan span').eq(0).css('font-size','22px')
                $('.topicotherSpan span').eq(0).css('color','#000')
                $(this).css('font-size','28px')
                $(this).css('color','#495057')
                $('.topicotherhot').css('z-index','98')
                $('.topicotherhot').css('opacity','0')
                $('.topicotherrecommend').css('z-index','99')
                $('.topicotherrecommend').css('opacity','1')
            })
        }
        window.onscroll=function(){
            var far=document.documentElement.scrollTop
            if(far>=window.innerHeight-80){
                $('#navs').css('backgroundColor','#fff')
                $('#navs').css('height','85px')
                $('#navs').css('position','fixed')
                $('#navs').css('box-shadow','rgba(0, 0, 0, 0.1) 0px 5px 20px')
                $('#navs a').css('color','#333')
                $('.navlog').html(`<img src="images/知遇2.png" alt="">`)

            }
            else{
                $('#navs').css('box-shadow','none')
                $('#navs').css('height','100px')
                $('#navs').css('backgroundColor','transparent')
                $('#navs').css('position','absolute')
                $('#navs a').css('color','#fff')
                $('.navlog').html(`<img src="images/知遇1.png" alt="">`)
            }
        }
    </script>
</head>
<body onclick="searchunclick(this)" >
    <!-- <div id="top"></div> -->
    <div id="topbg"></div>
    <div id="navs">
        <div id="nav">
            <div class="navlog"><img src="images/知遇1.png" alt=""></div>
            <div class="navbox">
                <li><a href="home2.html">首页</a></li>
                <li><a href="">闲嗑</a></li>
                <li><a href="">专栏</a></li>
                <li><a href="">社区</a></li>
                <li><a href="">书店</a></li>
            </div>
        </div>
    </div>
    <div id="topTitle" >
        <h1>愿半生编码，如一生老友！</h1>
        <p class="underline"></p>
        <p>/* 这里有你感兴趣的 */</p>
        <input type="text" name="" id="" placeholder="search" onmousemove="searchmov(this)" onmouseout="searchout(this)" onclick="searchclick(this)">
        <div style="clear: both;"></div>
    </div>
    <div id="scrollDown">
        <span class="scrollDownicon"></span>
    </div>
    <div id="topic">
        <div class="topicTitle">
            文章
            <div class='topicTitles'><a href="">发现更多</a></div>
        </div>
        <div class='topicmain'>
            <div class="topicmainimg">
                <img src="upload/a_05.png" alt="">
            </div>
            <div class="topicText">
                <div class='topicLabel'>前端</div>
                <div class='topicTitle1'>
                    <a href="">前端培训-中级阶段（42）- axios 使用及如何和 vue 结合使用</a>
                </div>
                <div class="topicInf">
                    <svg t="1602065941500" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2280" width="20" height="20"><path d="M916.945455 900.654545H111.709091c-18.618182 0-34.909091-16.290909-34.909091-34.90909s16.290909-34.909091 34.909091-34.909091h805.236364c18.618182 0 34.909091 16.290909 34.90909 34.909091s-13.963636 34.909091-34.90909 34.90909zM842.472727 747.054545H393.309091c-18.618182 0-34.909091-16.290909-34.909091-34.90909s16.290909-34.909091 34.909091-34.909091h446.836364c18.618182 0 34.909091 16.290909 34.90909 34.909091s-13.963636 34.909091-32.581818 34.90909zM160.581818 542.254545l104.727273 107.054546-46.545455 46.545454-104.727272-104.727272zM558.545455 141.963636l104.727272 107.054546-48.872727 46.545454-104.727273-104.727272z" fill="#8a8a8a" p-id="2281"></path><path d="M128 765.672727c-20.945455 0-41.890909-9.309091-58.181818-25.6-16.290909-16.290909-25.6-41.890909-25.6-65.163636l9.309091-114.036364L537.6 74.472727c23.272727-23.272727 53.527273-34.909091 86.109091-34.909091 37.236364 0 72.145455 16.290909 97.745454 41.890909 27.927273 27.927273 41.890909 65.163636 41.89091 102.4 0 32.581818-13.963636 62.836364-37.236364 83.781819l-479.418182 488.727272-114.036364 9.309091h-4.654545z m-4.654545-174.545454L116.363636 679.563636c0 4.654545 2.327273 9.309091 4.654546 9.309091 2.327273 2.327273 6.981818 4.654545 9.309091 4.654546l88.436363-6.981818L677.236364 216.436364c9.309091-9.309091 13.963636-20.945455 16.290909-34.909091 0-18.618182-6.981818-37.236364-20.945455-51.2-13.963636-13.963636-30.254545-20.945455-48.872727-20.945455-9.309091 0-23.272727 2.327273-34.909091 13.963637l-465.454545 467.781818z" fill="#8a8a8a" p-id="2282"></path></svg>
                    · 02.23.2019 
                    <svg t="1602066216052" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2819" width="20" height="20"><path d="M512 716.8c-105.198933 0-191.146667-85.947733-191.146667-191.146667s85.947733-191.146667 191.146667-191.146666 191.146667 85.947733 191.146667 191.146666S617.198933 716.8 512 716.8z m0-54.613333c75.025067 0 136.533333-61.508267 136.533333-136.533334s-61.508267-136.533333-136.533333-136.533333-136.533333 61.508267-136.533333 136.533333 61.508267 136.533333 136.533333 136.533334z m0 218.453333c-178.688 0-315.050667-116.872533-407.586133-344.712533a27.306667 27.306667 0 0 1 0-20.548267C196.9152 287.5392 333.312 170.666667 512 170.666667s315.050667 116.872533 407.586133 344.712533a27.306667 27.306667 0 0 1 0 20.548267C827.0848 763.767467 690.688 880.64 512 880.64z m0-54.613333c151.04 0 268.151467-98.235733 352.768-300.373334-84.650667-202.1376-201.728-300.373333-352.768-300.373333-151.04 0-268.151467 98.235733-352.768 300.373333 84.650667 202.1376 201.728 300.373333 352.768 300.373334z" p-id="2820" fill="#8a8a8a"></path></svg>
                    · 400次浏览
                </div>
                <div class='topicContent'>
                    前端最基础的就是 HTML CSS Javascript。掌握了这三门技术就算入门,但也仅仅是入门<br>
                    今天来了解一下 axios 这个库,基本上大多数的 vue 应用都在使用过 axios。
                </div>
                <div class="topicAuthor">
                    <img src="upload/icon04.jpg" alt="">
                    <div class="topicAuthorName">陆豪</div>
                    <div class="topicAuthorIntroduce">平平无奇的人</div>
                    <div id="topicchange">
                        <svg t="1602067884105" style="transform: rotateY(180deg);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1395" width="20" height="20"><path d="M1010.80577 455.530292a29.72694 29.72694 0 0 1 0 42.037895L758.668226 749.785575a29.714963 29.714963 0 0 1-42.017934-42.027914l252.137544-252.227369a29.720951 29.720951 0 0 1 42.017934 0zM758.668226 203.312904l252.137544 252.217388a29.717957 29.717957 0 0 1-42.017934 42.037895l-252.137544-252.207407a29.721949 29.721949 0 0 1 42.017934-42.047876zM27.945419 447.20655h955.693411a20.460039 20.460039 0 0 1 20.460039 20.460039v18.254347a20.460039 20.460039 0 0 1-20.460039 20.460039H27.945419A20.460039 20.460039 0 0 1 7.48538 485.920936v-18.254347a20.460039 20.460039 0 0 1 20.460039-20.460039z" fill="#8a8a8a" p-id="1396"></path></svg>
                        <svg t="1602067884105" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1395" width="20" height="20"><path d="M1010.80577 455.530292a29.72694 29.72694 0 0 1 0 42.037895L758.668226 749.785575a29.714963 29.714963 0 0 1-42.017934-42.027914l252.137544-252.227369a29.720951 29.720951 0 0 1 42.017934 0zM758.668226 203.312904l252.137544 252.217388a29.717957 29.717957 0 0 1-42.017934 42.037895l-252.137544-252.207407a29.721949 29.721949 0 0 1 42.017934-42.047876zM27.945419 447.20655h955.693411a20.460039 20.460039 0 0 1 20.460039 20.460039v18.254347a20.460039 20.460039 0 0 1-20.460039 20.460039H27.945419A20.460039 20.460039 0 0 1 7.48538 485.920936v-18.254347a20.460039 20.460039 0 0 1 20.460039-20.460039z" fill="#8a8a8a" p-id="1396"></path></svg>
                    </div>
                </div>
            </div>
        </div>
        <div class='topicmain2'>
            <div class="topicmainimg">
                <img src="upload/a_06.png" alt="">
            </div>
            <div class="topicText">
                <div class='topicLabel'>前端</div>
                <div class='topicTitle1'>
                    <a href="">Node开发神器：使用Llama Logs实时可视化Node错误</a>
                </div>
                <div class="topicInf">
                    <svg t="1602065941500" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2280" width="20" height="20"><path d="M916.945455 900.654545H111.709091c-18.618182 0-34.909091-16.290909-34.909091-34.90909s16.290909-34.909091 34.909091-34.909091h805.236364c18.618182 0 34.909091 16.290909 34.90909 34.909091s-13.963636 34.909091-34.90909 34.90909zM842.472727 747.054545H393.309091c-18.618182 0-34.909091-16.290909-34.909091-34.90909s16.290909-34.909091 34.909091-34.909091h446.836364c18.618182 0 34.909091 16.290909 34.90909 34.909091s-13.963636 34.909091-32.581818 34.90909zM160.581818 542.254545l104.727273 107.054546-46.545455 46.545454-104.727272-104.727272zM558.545455 141.963636l104.727272 107.054546-48.872727 46.545454-104.727273-104.727272z" fill="#8a8a8a" p-id="2281"></path><path d="M128 765.672727c-20.945455 0-41.890909-9.309091-58.181818-25.6-16.290909-16.290909-25.6-41.890909-25.6-65.163636l9.309091-114.036364L537.6 74.472727c23.272727-23.272727 53.527273-34.909091 86.109091-34.909091 37.236364 0 72.145455 16.290909 97.745454 41.890909 27.927273 27.927273 41.890909 65.163636 41.89091 102.4 0 32.581818-13.963636 62.836364-37.236364 83.781819l-479.418182 488.727272-114.036364 9.309091h-4.654545z m-4.654545-174.545454L116.363636 679.563636c0 4.654545 2.327273 9.309091 4.654546 9.309091 2.327273 2.327273 6.981818 4.654545 9.309091 4.654546l88.436363-6.981818L677.236364 216.436364c9.309091-9.309091 13.963636-20.945455 16.290909-34.909091 0-18.618182-6.981818-37.236364-20.945455-51.2-13.963636-13.963636-30.254545-20.945455-48.872727-20.945455-9.309091 0-23.272727 2.327273-34.909091 13.963637l-465.454545 467.781818z" fill="#8a8a8a" p-id="2282"></path></svg>
                    · 02.23.2019 
                    <svg t="1602066216052" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2819" width="20" height="20"><path d="M512 716.8c-105.198933 0-191.146667-85.947733-191.146667-191.146667s85.947733-191.146667 191.146667-191.146666 191.146667 85.947733 191.146667 191.146666S617.198933 716.8 512 716.8z m0-54.613333c75.025067 0 136.533333-61.508267 136.533333-136.533334s-61.508267-136.533333-136.533333-136.533333-136.533333 61.508267-136.533333 136.533333 61.508267 136.533333 136.533333 136.533334z m0 218.453333c-178.688 0-315.050667-116.872533-407.586133-344.712533a27.306667 27.306667 0 0 1 0-20.548267C196.9152 287.5392 333.312 170.666667 512 170.666667s315.050667 116.872533 407.586133 344.712533a27.306667 27.306667 0 0 1 0 20.548267C827.0848 763.767467 690.688 880.64 512 880.64z m0-54.613333c151.04 0 268.151467-98.235733 352.768-300.373334-84.650667-202.1376-201.728-300.373333-352.768-300.373333-151.04 0-268.151467 98.235733-352.768 300.373333 84.650667 202.1376 201.728 300.373333 352.768 300.373334z" p-id="2820" fill="#8a8a8a"></path></svg>
                    · 400次浏览
                </div>
                <div class='topicContent'>
                    你是否想知道程序内部发生了什么?是否希望以视觉方式检查其内部运作? 上面的动图的一个例子。它是我创建的一个新工具，让你实时看到你的应用程序的内部运作。它已经准备好了，你可以开始在你的应用程序中免费使用。
                </div>
                <div class="topicAuthor">
                    <img src="upload/icon05.jpg" alt="">
                    <div class="topicAuthorName">吴迎春</div>
                    <div class="topicAuthorIntroduce">不甘寂寞的boy</div>
                    <div id="topicchange">
                        <svg t="1602067884105" style="transform: rotateY(180deg);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1395" width="20" height="20"><path d="M1010.80577 455.530292a29.72694 29.72694 0 0 1 0 42.037895L758.668226 749.785575a29.714963 29.714963 0 0 1-42.017934-42.027914l252.137544-252.227369a29.720951 29.720951 0 0 1 42.017934 0zM758.668226 203.312904l252.137544 252.217388a29.717957 29.717957 0 0 1-42.017934 42.037895l-252.137544-252.207407a29.721949 29.721949 0 0 1 42.017934-42.047876zM27.945419 447.20655h955.693411a20.460039 20.460039 0 0 1 20.460039 20.460039v18.254347a20.460039 20.460039 0 0 1-20.460039 20.460039H27.945419A20.460039 20.460039 0 0 1 7.48538 485.920936v-18.254347a20.460039 20.460039 0 0 1 20.460039-20.460039z" fill="#8a8a8a" p-id="1396"></path></svg>
                        <svg t="1602067884105" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1395" width="20" height="20"><path d="M1010.80577 455.530292a29.72694 29.72694 0 0 1 0 42.037895L758.668226 749.785575a29.714963 29.714963 0 0 1-42.017934-42.027914l252.137544-252.227369a29.720951 29.720951 0 0 1 42.017934 0zM758.668226 203.312904l252.137544 252.217388a29.717957 29.717957 0 0 1-42.017934 42.037895l-252.137544-252.207407a29.721949 29.721949 0 0 1 42.017934-42.047876zM27.945419 447.20655h955.693411a20.460039 20.460039 0 0 1 20.460039 20.460039v18.254347a20.460039 20.460039 0 0 1-20.460039 20.460039H27.945419A20.460039 20.460039 0 0 1 7.48538 485.920936v-18.254347a20.460039 20.460039 0 0 1 20.460039-20.460039z" fill="#8a8a8a" p-id="1396"></path></svg>
                    </div>
                </div>
            </div>
        </div>
        <div class="topicother">
            <div class="topicotherLeft">
                <div class="topicotherLefts">

                </div>
            </div>
            <div class="topicotherRight">
                <div class="topicotherSpan">
                    <span>最热文章</span><span>推荐文章</span>
                </div>
                <div class='topicotherhot'>
                    <div class="topicotherSmall">
                        <img src="upload/t_01.png" alt="">
                        <div class="topicotherSmalllabel" >JavaScript</div>
                        <div class="topicotherSmalltitle"><a href="">JMeter单机可以多少并发?</a></div>
                        <div class='topicotherSmalltime'>02.16 · 240次浏览</div>
                    </div>
                    <div class="topicotherSmall">
                        <img src="upload/t_02.png" alt="">
                        <div class="topicotherSmalllabel" >JavaScript</div>
                        <div class="topicotherSmalltitle"><a href="">JMeter单机可以多少并发?</a></div>
                        <div class='topicotherSmalltime'>02.16 · 240次浏览</div>
                    </div>
                    <div class="topicotherSmall">
                        <img src="upload/t_03.png" alt="">
                        <div class="topicotherSmalllabel" >JavaScript</div>
                        <div class="topicotherSmalltitle"><a href="">JMeter单机可以多少并发?</a></div>
                        <div class='topicotherSmalltime'>02.16 · 240次浏览</div>
                    </div>
                    <div class="topicotherSmall">
                        <img src="upload/t_04.png" alt="">
                        <div class="topicotherSmalllabel" >JavaScript</div>
                        <div class="topicotherSmalltitle"><a href="">JMeter单机可以多少并发?</a></div>
                        <div class='topicotherSmalltime'>02.16 · 240次浏览</div>
                    </div>
                </div>
                <div class='topicotherrecommend'>
                    <div class="topicotherSmall">
                        <img src="upload/a_01.png" alt="">
                        <div class="topicotherSmalllabel" >JavaScript</div>
                        <div class="topicotherSmalltitle"><a href="">JMeter单机可以多少并发?</a></div>
                        <div class='topicotherSmalltime'>02.16 · 240次浏览</div>
                    </div>
                    <div class="topicotherSmall">
                        <img src="upload/a_02.png" alt="">
                        <div class="topicotherSmalllabel" >JavaScript</div>
                        <div class="topicotherSmalltitle"><a href="">JMeter单机可以多少并发?</a></div>
                        <div class='topicotherSmalltime'>02.16 · 240次浏览</div>
                    </div>
                    <div class="topicotherSmall">
                        <img src="upload/a_03.png" alt="">
                        <div class="topicotherSmalllabel" >JavaScript</div>
                        <div class="topicotherSmalltitle"><a href="">JMeter单机可以多少并发?</a></div>
                        <div class='topicotherSmalltime'>02.16 · 240次浏览</div>
                    </div>
                    <div class="topicotherSmall">
                        <img src="upload/a_04.png" alt="">
                        <div class="topicotherSmalllabel" >JavaScript</div>
                        <div class="topicotherSmalltitle"><a href="">JMeter单机可以多少并发?</a></div>
                        <div class='topicotherSmalltime'>02.16 · 240次浏览</div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
   
    <div id="middle">
        <div class="middle-bg"></div>
        <div class='middle-logo'>
            <img src="images/知遇3.png" alt="">
        </div>
        <h1>Visit the Zenith of World
            <br>Meet better You
        </h1>
        <div class="opitions">
            <div class="opleft">
                <span class="oplefticon op ">
                    <svg t="1601969646454" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1810" width="24" height="24"><path d="M230.836828 464.543575C379.00482 321.294916 527.16677 178.056327 675.323687 34.957685c61.007388-59.03603 151.958678 36.828551 90.667365 96.008557C634.135595 258.462159 502.280138 385.819135 370.496165 513.319079c132.486735 131.850423 264.97347 263.849857 397.532696 395.705314 60.304626 60.023723-30.643643 155.890318-90.734822 95.937073C528.424291 856.872006 379.636097 708.711062 230.836828 560.548104 206.240161 535.951436 205.603848 488.856319 230.836828 464.543575L230.836828 464.543575zM230.836828 464.543575" p-id="1811" fill="#ffffff"></path></svg>
                </span>
            </div>
            <div class="opIcons">
                <div class="opIconss">
                    <div class="opIcon">
                        <svg t="1601970227749" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2753" width="64" height="64"><path d="M824.888889 630.992593l-122.026667-50.346667a28.444444 28.444444 0 1 0-21.143703 53.57037l60.112592 24.367408-60.112592 27.591111a28.444444 28.444444 0 0 0-14.601482 37.357037A28.918519 28.918519 0 0 0 693.096296 739.555556a15.454815 15.454815 0 0 0 11.377778-3.223704l120.414815-54.992593a28.918519 28.918519 0 0 0 16.213333-25.979259A25.694815 25.694815 0 0 0 824.888889 630.992593zM548.598519 517.30963a28.444444 28.444444 0 0 0-35.745186 17.825185l-61.629629 188.397037a28.444444 28.444444 0 0 0 17.825185 35.745185 17.540741 17.540741 0 0 0 8.154074 1.611852 31.668148 31.668148 0 0 0 27.591111-19.531852l61.724445-188.302222a28.444444 28.444444 0 0 0-17.92-35.745185zM358.684444 597.333333a30.151111 30.151111 0 0 0-37.357037-16.213333L199.111111 630.992593a30.435556 30.435556 0 0 0-17.825185 25.979259A28.444444 28.444444 0 0 0 197.973333 682.666667l120.130371 55.182222a30.056296 30.056296 0 0 0 11.377777 3.223704 28.918519 28.918519 0 0 0 25.97926-16.213334 28.444444 28.444444 0 0 0-14.601482-37.357037l-60.112592-27.591111 60.112592-24.367407c16.213333-7.774815 24.367407-24.082963 17.825185-38.210371z" fill="#19A7FD" p-id="2754"></path><path d="M853.333333 170.666667a56.888889 56.888889 0 0 1 56.888889 56.888889v568.888888a56.888889 56.888889 0 0 1-56.888889 56.888889H170.666667a56.888889 56.888889 0 0 1-56.888889-56.888889V227.555556a56.888889 56.888889 0 0 1 56.888889-56.888889h682.666666m0-56.888889H170.666667A113.777778 113.777778 0 0 0 56.888889 227.555556v568.888888a113.777778 113.777778 0 0 0 113.777778 113.777778h682.666666a113.777778 113.777778 0 0 0 113.777778-113.777778V227.555556a113.777778 113.777778 0 0 0-113.777778-113.777778z" fill="#19A7FD" p-id="2755"></path><path d="M967.111111 365.321481H56.888889v56.888889h910.222222v-56.888889z" fill="#19A7FD" p-id="2756"></path><path d="M224.995556 273.540741m-42.666667 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z" fill="#19A7FD" p-id="2757"></path><path d="M357.451852 273.540741m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z" fill="#19A7FD" p-id="2758"></path><path d="M489.908148 273.540741m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z" fill="#19A7FD" p-id="2759"></path></svg>
                        <h3>前端</h3>
                    </div>
                    <div class="opIcon">
                        <svg t="1601970947489" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3186" width="64" height="64"><path d="M824.888889 383.146667L703.431111 332.8A28.444444 28.444444 0 1 0 682.666667 386.37037l60.112592 24.367408L682.666667 438.328889a28.444444 28.444444 0 0 0-14.601482 37.357037 28.918519 28.918519 0 0 0 25.979259 16.213333 15.454815 15.454815 0 0 0 11.377778-3.223703L824.888889 433.398519A28.918519 28.918519 0 0 0 841.481481 407.703704 25.694815 25.694815 0 0 0 824.888889 383.146667zM549.262222 269.463704a28.444444 28.444444 0 0 0-35.745185 17.825185l-61.724444 188.397037a28.444444 28.444444 0 0 0 17.825185 35.745185 17.540741 17.540741 0 0 0 8.154074 1.611852A31.668148 31.668148 0 0 0 505.362963 493.037037l61.724444-188.302222a28.444444 28.444444 0 0 0-17.825185-35.271111zM359.253333 349.013333A30.151111 30.151111 0 0 0 322.37037 332.8l-122.216296 50.346667a30.435556 30.435556 0 0 0-17.825185 25.979259 28.444444 28.444444 0 0 0 16.213333 25.979259l120.130371 55.182222a30.056296 30.056296 0 0 0 11.377777 3.223704 28.918519 28.918519 0 0 0 25.97926-16.213333A28.444444 28.444444 0 0 0 341.333333 439.940741l-60.112592-27.591111L341.333333 387.982222c16.308148-8.154074 24.462222-24.367407 17.92-38.968889zM580.740741 817.208889H142.222222a28.444444 28.444444 0 0 0 0 56.888889h438.518519a28.444444 28.444444 0 1 0 0-56.888889z" fill="#19A7FD" p-id="3187"></path><path d="M910.222222 134.542222v512H113.777778v-512h796.444444m0-56.888889H113.777778a56.888889 56.888889 0 0 0-56.888889 56.888889v512a56.888889 56.888889 0 0 0 56.888889 56.888889h796.444444a56.888889 56.888889 0 0 0 56.888889-56.888889v-512a56.888889 56.888889 0 0 0-56.888889-56.888889zM881.777778 817.208889H748.468148a28.444444 28.444444 0 0 0 0 56.888889H881.777778a28.444444 28.444444 0 0 0 0-56.888889z" fill="#19A7FD" p-id="3188"></path><path d="M666.642963 946.346667a100.693333 100.693333 0 1 1 100.693333-100.693334 100.882963 100.882963 0 0 1-100.693333 100.693334z m0-144.592593a43.804444 43.804444 0 1 0 43.899259 43.899259 43.899259 43.899259 0 0 0-43.899259-43.899259z" fill="#19A7FD" p-id="3189"></path></svg>
                        <h3>后端</h3>
                    </div>
                    <div class="opIcon">
                        <svg t="1601971002439" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4540" width="64" height="64"><path d="M963.615 347.084q23.342 0 39.58 14.716t16.238 36.028v299.385q0 20.297-16.238 35.013t-39.58 14.716h-18.267q-23.342 0-39.58-14.716t-16.238-35.013V397.828q0-21.313 16.238-36.028t39.58-14.716h18.267z m-823.056 0q23.342 0 38.565 14.716t15.223 36.028v299.385q0 20.297-15.223 35.013t-38.565 14.716h-18.268q-23.342 0-39.58-14.716t-16.237-35.013V397.828q0-21.313 16.238-36.028t39.58-14.716h18.267z m560.206-235.449q18.268 8.12 38.058 22.327t38.057 33.49 31.968 42.118 19.79 48.206H252.194q16.238-53.788 51.251-88.293t70.533-54.803L322.22 33.49q-2.03-2.03-0.507-7.61t10.656-11.672q8.119-7.104 15.223-6.597t9.133 2.538L409.5 93.368q28.416-13.194 59.877-20.298t64.951-7.104q69.011 0 128.888 28.417l53.788-84.234q2.03-2.03 7.611-2.03t16.746 6.09q10.148 5.073 11.67 9.133t-0.507 6.09z m-283.148 87.279q13.194 0 22.327-9.134t9.134-22.327-9.134-22.327-22.327-9.134-22.327 9.134-9.133 22.327 9.133 22.327 22.327 9.134z m249.658-4.06q13.193 0 22.327-9.133t9.133-22.328-9.133-22.327-22.327-9.133-22.328 9.133-9.133 22.327 9.133 22.328 22.328 9.133z m161.363 126.859l1.015 456.69q0 22.326-14.715 37.55t-36.028 15.222h-14.208v142.082q0 20.297-14.716 35.52T713.958 1024h-29.43q-20.298 0-35.014-15.223t-14.715-35.52V831.175H448.063v142.082q0 20.297-14.715 35.52T397.32 1024H367.89q-20.297 0-35.013-15.223t-14.715-35.52V831.175h-11.164q-21.312 0-36.028-15.223t-14.715-37.55v-456.69h572.384z" fill="#19A7FD" p-id="4541"></path></svg>
                        <h3>安卓</h3>
                    </div>
                    <div class="opIcon">
                        <svg t="1601971509856" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5695" width="64" height="64"><path d="M755.472961 545.648638c-1.125612-166.078945 92.197861-170.376736 96.393325-173.037274-52.494454-76.746278-134.152493-88.821025-163.21375-89.946637-69.480963-7.060658-135.58509 40.112721-170.888378 40.112721-35.200959 0-89.639652-40.215049-147.250525-39.191766-75.722994 1.125612-145.613271 43.898871-184.702708 111.74258-78.690517 136.608374-20.158689 338.911562 56.587589 449.630858 37.452183 54.234036 82.169681 115.119416 140.906166 112.970521 56.48526-2.251224 77.87189-36.633557 146.227241-36.633557s87.490756 36.633557 147.352853 35.405616c60.783052-1.125612 99.360847-55.25732 136.506046-109.696013 43.080244-62.931948 60.783052-120.747477 61.806336-123.817328-1.330269-0.61397-118.598581-66.820426-119.826521-177.539722L755.472961 545.648638 755.472961 545.648638z" p-id="5696" fill="#19A7FD"></path><path d="M511.829112 288.395115c0-123.203358 99.872489-223.178175 223.178175-223.178175C735.007287 188.522626 635.032469 288.395115 511.829112 288.395115z" p-id="5697" fill="#19A7FD"></path></svg>
                        <h3>苹果</h3>
                    </div>
                    <div class="opIcon">
                        <svg t="1601971615893" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6544" width="64" height="64"><path d="M409.6 750.933l34.133 68.267H170.667v136.533h682.666V819.2H580.267l34.133-68.267h238.933A68.267 68.267 0 0 1 921.6 819.2v136.533A68.267 68.267 0 0 1 853.333 1024H170.667a68.267 68.267 0 0 1-68.267-68.267V819.2a68.267 68.267 0 0 1 68.267-68.267H409.6zM273.067 68.267h477.866a68.267 68.267 0 0 1 68.267 68.266V614.4a68.267 68.267 0 0 1-68.267 68.267H273.067A68.267 68.267 0 0 1 204.8 614.4V136.533a68.267 68.267 0 0 1 68.267-68.266z m0 68.266V614.4h477.866V136.533H273.067z m614.4 102.4a34.133 34.133 0 0 1 34.133 34.134v204.8a34.133 34.133 0 1 1-68.267 0v-204.8a34.133 34.133 0 0 1 34.134-34.134z m-750.934 0a34.133 34.133 0 0 1 34.134 34.134v204.8a34.133 34.133 0 0 1-68.267 0v-204.8a34.133 34.133 0 0 1 34.133-34.134zM989.867 307.2A34.133 34.133 0 0 1 1024 341.333V409.6a34.133 34.133 0 1 1-68.267 0v-68.267a34.133 34.133 0 0 1 34.134-34.133z m-955.734 0a34.133 34.133 0 0 1 34.134 34.133V409.6A34.133 34.133 0 0 1 0 409.6v-68.267A34.133 34.133 0 0 1 34.133 307.2z m341.334 102.4a51.2 51.2 0 1 0 0-102.4 51.2 51.2 0 0 0 0 102.4z m273.066 0a51.2 51.2 0 1 0 0-102.4 51.2 51.2 0 0 0 0 102.4zM512 0a34.133 34.133 0 0 1 34.133 34.133V102.4a34.133 34.133 0 0 1-68.266 0V34.133A34.133 34.133 0 0 1 512 0z m-68.267 614.4a34.133 34.133 0 0 1 34.134 34.133v136.534a34.133 34.133 0 1 1-68.267 0V648.533a34.133 34.133 0 0 1 34.133-34.133z m136.534 0a34.133 34.133 0 0 1 34.133 34.133v136.534a34.133 34.133 0 1 1-68.267 0V648.533a34.133 34.133 0 0 1 34.134-34.133z" p-id="6545" fill="#19A7FD"></path></svg>
                        <h3>人工智能</h3>
                    </div>
                    <div class="opIcon">
                        <svg t="1601971652934" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7495" width="64" height="64"><path d="M641.561309 479.184617 215.51289 479.184617c-83.508949 0-151.454434-67.927065-151.454434-151.419641 0-20.033265 16.236799-36.275181 36.275181-36.275181 20.039405 0 36.275181 16.242939 36.275181 36.275181 0 43.490513 35.402301 78.868255 78.904071 78.868255l426.048419 0c43.502793 0 78.903048-35.377742 78.903048-78.868255 0-20.033265 16.235776-36.275181 36.275181-36.275181 20.040429 0 36.275181 16.242939 36.275181 36.275181C793.015743 411.256528 725.071282 479.184617 641.561309 479.184617z" p-id="7496" fill="#19A7FD"></path><path d="M640.709919 902.162094 216.364281 902.162094c-83.250052 0-150.98269-67.710125-150.98269-150.947897L65.381591 326.83786c0-83.243913 67.732637-150.97041 150.98269-150.97041l44.789089 0c20.039405 0 36.275181 16.242939 36.275181 36.275181s-16.235776 36.275181-36.275181 36.275181l-44.789089 0c-43.242873 0-78.432327 35.177174-78.432327 78.420047l0 424.376337c0 43.230594 35.189454 78.396511 78.432327 78.396511l424.346661 0c43.242873 0 78.432327-35.165918 78.432327-78.396511L719.143269 326.83786c0-43.24185-35.190477-78.420047-78.432327-78.420047l-56.94085 0c-20.037359 0-36.275181-16.242939-36.275181-36.275181s16.237823-36.275181 36.275181-36.275181l56.94085 0c83.250052 0 150.98269 67.727521 150.98269 150.97041l0 424.376337C791.692608 834.452993 723.959971 902.162094 640.709919 902.162094z" p-id="7497" fill="#19A7FD"></path><path d="M766.470157 754.084571c-20.037359 0-36.273135-16.236799-36.273135-36.275181 0-20.032242 16.235776-36.275181 36.273135-36.275181 66.671469 0 120.92-54.243415 120.92-120.917954 0-66.677609-54.248531-120.918977-120.92-120.918977-20.037359 0-36.273135-16.242939-36.273135-36.275181s16.235776-36.275181 36.273135-36.275181c106.677625 0 193.470363 86.791715 193.470363 193.46934C959.94052 667.291832 873.147782 754.084571 766.470157 754.084571z" p-id="7498" fill="#19A7FD"></path><path d="M366.744243 350.289991c-3.542686 0-7.143701-0.779759-10.54517-2.427282-12.008498-5.832845-17.027815-20.298302-11.206226-32.313963 6.578836-13.785981 19.850094-55.063083 2.208295-79.328743-39.947827-54.920844-1.937119-110.85783-0.295735-113.207341 7.628748-10.975982 22.683628-13.674441 33.665751-6.039553 10.910491 7.592932 13.638625 22.565948 6.14086 33.512255-2.149966 3.212158-19.554358 30.956036-0.402159 57.288774 38.377052 52.760644 3.696182 125.795031 2.208295 128.877229C384.33897 345.270674 375.718639 350.289991 366.744243 350.289991z" p-id="7499" fill="#19A7FD"></path><path d="M487.66322 350.289991c-3.543709 0-7.144724-0.779759-10.54517-2.427282-12.009522-5.832845-17.028838-20.298302-11.208273-32.313963 6.578836-13.785981 19.85214-55.063083 2.208295-79.328743-39.946804-54.920844-1.937119-110.85783-0.294712-113.207341 7.617491-10.975982 22.684652-13.674441 33.665751-6.039553 10.911514 7.592932 13.638625 22.565948 6.14086 33.512255-2.15099 3.212158-19.555381 30.956036-0.402159 57.288774 38.377052 52.760644 3.696182 125.795031 2.208295 128.877229C505.2559 345.270674 496.635569 350.289991 487.66322 350.289991z" p-id="7500" fill="#19A7FD"></path></svg>
                        <h3>趣事</h3>
                    </div>

                    <div class="opIcon">
                        <svg t="1601970227749" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2753" width="64" height="64"><path d="M824.888889 630.992593l-122.026667-50.346667a28.444444 28.444444 0 1 0-21.143703 53.57037l60.112592 24.367408-60.112592 27.591111a28.444444 28.444444 0 0 0-14.601482 37.357037A28.918519 28.918519 0 0 0 693.096296 739.555556a15.454815 15.454815 0 0 0 11.377778-3.223704l120.414815-54.992593a28.918519 28.918519 0 0 0 16.213333-25.979259A25.694815 25.694815 0 0 0 824.888889 630.992593zM548.598519 517.30963a28.444444 28.444444 0 0 0-35.745186 17.825185l-61.629629 188.397037a28.444444 28.444444 0 0 0 17.825185 35.745185 17.540741 17.540741 0 0 0 8.154074 1.611852 31.668148 31.668148 0 0 0 27.591111-19.531852l61.724445-188.302222a28.444444 28.444444 0 0 0-17.92-35.745185zM358.684444 597.333333a30.151111 30.151111 0 0 0-37.357037-16.213333L199.111111 630.992593a30.435556 30.435556 0 0 0-17.825185 25.979259A28.444444 28.444444 0 0 0 197.973333 682.666667l120.130371 55.182222a30.056296 30.056296 0 0 0 11.377777 3.223704 28.918519 28.918519 0 0 0 25.97926-16.213334 28.444444 28.444444 0 0 0-14.601482-37.357037l-60.112592-27.591111 60.112592-24.367407c16.213333-7.774815 24.367407-24.082963 17.825185-38.210371z" fill="#19A7FD" p-id="2754"></path><path d="M853.333333 170.666667a56.888889 56.888889 0 0 1 56.888889 56.888889v568.888888a56.888889 56.888889 0 0 1-56.888889 56.888889H170.666667a56.888889 56.888889 0 0 1-56.888889-56.888889V227.555556a56.888889 56.888889 0 0 1 56.888889-56.888889h682.666666m0-56.888889H170.666667A113.777778 113.777778 0 0 0 56.888889 227.555556v568.888888a113.777778 113.777778 0 0 0 113.777778 113.777778h682.666666a113.777778 113.777778 0 0 0 113.777778-113.777778V227.555556a113.777778 113.777778 0 0 0-113.777778-113.777778z" fill="#19A7FD" p-id="2755"></path><path d="M967.111111 365.321481H56.888889v56.888889h910.222222v-56.888889z" fill="#19A7FD" p-id="2756"></path><path d="M224.995556 273.540741m-42.666667 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z" fill="#19A7FD" p-id="2757"></path><path d="M357.451852 273.540741m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z" fill="#19A7FD" p-id="2758"></path><path d="M489.908148 273.540741m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z" fill="#19A7FD" p-id="2759"></path></svg>
                        <h3>前端</h3>
                    </div>
                    <div class="opIcon">
                        <svg t="1601970947489" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3186" width="64" height="64"><path d="M824.888889 383.146667L703.431111 332.8A28.444444 28.444444 0 1 0 682.666667 386.37037l60.112592 24.367408L682.666667 438.328889a28.444444 28.444444 0 0 0-14.601482 37.357037 28.918519 28.918519 0 0 0 25.979259 16.213333 15.454815 15.454815 0 0 0 11.377778-3.223703L824.888889 433.398519A28.918519 28.918519 0 0 0 841.481481 407.703704 25.694815 25.694815 0 0 0 824.888889 383.146667zM549.262222 269.463704a28.444444 28.444444 0 0 0-35.745185 17.825185l-61.724444 188.397037a28.444444 28.444444 0 0 0 17.825185 35.745185 17.540741 17.540741 0 0 0 8.154074 1.611852A31.668148 31.668148 0 0 0 505.362963 493.037037l61.724444-188.302222a28.444444 28.444444 0 0 0-17.825185-35.271111zM359.253333 349.013333A30.151111 30.151111 0 0 0 322.37037 332.8l-122.216296 50.346667a30.435556 30.435556 0 0 0-17.825185 25.979259 28.444444 28.444444 0 0 0 16.213333 25.979259l120.130371 55.182222a30.056296 30.056296 0 0 0 11.377777 3.223704 28.918519 28.918519 0 0 0 25.97926-16.213333A28.444444 28.444444 0 0 0 341.333333 439.940741l-60.112592-27.591111L341.333333 387.982222c16.308148-8.154074 24.462222-24.367407 17.92-38.968889zM580.740741 817.208889H142.222222a28.444444 28.444444 0 0 0 0 56.888889h438.518519a28.444444 28.444444 0 1 0 0-56.888889z" fill="#19A7FD" p-id="3187"></path><path d="M910.222222 134.542222v512H113.777778v-512h796.444444m0-56.888889H113.777778a56.888889 56.888889 0 0 0-56.888889 56.888889v512a56.888889 56.888889 0 0 0 56.888889 56.888889h796.444444a56.888889 56.888889 0 0 0 56.888889-56.888889v-512a56.888889 56.888889 0 0 0-56.888889-56.888889zM881.777778 817.208889H748.468148a28.444444 28.444444 0 0 0 0 56.888889H881.777778a28.444444 28.444444 0 0 0 0-56.888889z" fill="#19A7FD" p-id="3188"></path><path d="M666.642963 946.346667a100.693333 100.693333 0 1 1 100.693333-100.693334 100.882963 100.882963 0 0 1-100.693333 100.693334z m0-144.592593a43.804444 43.804444 0 1 0 43.899259 43.899259 43.899259 43.899259 0 0 0-43.899259-43.899259z" fill="#19A7FD" p-id="3189"></path></svg>
                        <h3>后端</h3>
                    </div>
                    <div class="opIcon">
                        <svg t="1601971002439" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4540" width="64" height="64"><path d="M963.615 347.084q23.342 0 39.58 14.716t16.238 36.028v299.385q0 20.297-16.238 35.013t-39.58 14.716h-18.267q-23.342 0-39.58-14.716t-16.238-35.013V397.828q0-21.313 16.238-36.028t39.58-14.716h18.267z m-823.056 0q23.342 0 38.565 14.716t15.223 36.028v299.385q0 20.297-15.223 35.013t-38.565 14.716h-18.268q-23.342 0-39.58-14.716t-16.237-35.013V397.828q0-21.313 16.238-36.028t39.58-14.716h18.267z m560.206-235.449q18.268 8.12 38.058 22.327t38.057 33.49 31.968 42.118 19.79 48.206H252.194q16.238-53.788 51.251-88.293t70.533-54.803L322.22 33.49q-2.03-2.03-0.507-7.61t10.656-11.672q8.119-7.104 15.223-6.597t9.133 2.538L409.5 93.368q28.416-13.194 59.877-20.298t64.951-7.104q69.011 0 128.888 28.417l53.788-84.234q2.03-2.03 7.611-2.03t16.746 6.09q10.148 5.073 11.67 9.133t-0.507 6.09z m-283.148 87.279q13.194 0 22.327-9.134t9.134-22.327-9.134-22.327-22.327-9.134-22.327 9.134-9.133 22.327 9.133 22.327 22.327 9.134z m249.658-4.06q13.193 0 22.327-9.133t9.133-22.328-9.133-22.327-22.327-9.133-22.328 9.133-9.133 22.327 9.133 22.328 22.328 9.133z m161.363 126.859l1.015 456.69q0 22.326-14.715 37.55t-36.028 15.222h-14.208v142.082q0 20.297-14.716 35.52T713.958 1024h-29.43q-20.298 0-35.014-15.223t-14.715-35.52V831.175H448.063v142.082q0 20.297-14.715 35.52T397.32 1024H367.89q-20.297 0-35.013-15.223t-14.715-35.52V831.175h-11.164q-21.312 0-36.028-15.223t-14.715-37.55v-456.69h572.384z" fill="#19A7FD" p-id="4541"></path></svg>
                        <h3>安卓</h3>
                    </div>
                    <div class="opIcon">
                        <svg t="1601971509856" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5695" width="64" height="64"><path d="M755.472961 545.648638c-1.125612-166.078945 92.197861-170.376736 96.393325-173.037274-52.494454-76.746278-134.152493-88.821025-163.21375-89.946637-69.480963-7.060658-135.58509 40.112721-170.888378 40.112721-35.200959 0-89.639652-40.215049-147.250525-39.191766-75.722994 1.125612-145.613271 43.898871-184.702708 111.74258-78.690517 136.608374-20.158689 338.911562 56.587589 449.630858 37.452183 54.234036 82.169681 115.119416 140.906166 112.970521 56.48526-2.251224 77.87189-36.633557 146.227241-36.633557s87.490756 36.633557 147.352853 35.405616c60.783052-1.125612 99.360847-55.25732 136.506046-109.696013 43.080244-62.931948 60.783052-120.747477 61.806336-123.817328-1.330269-0.61397-118.598581-66.820426-119.826521-177.539722L755.472961 545.648638 755.472961 545.648638z" p-id="5696" fill="#19A7FD"></path><path d="M511.829112 288.395115c0-123.203358 99.872489-223.178175 223.178175-223.178175C735.007287 188.522626 635.032469 288.395115 511.829112 288.395115z" p-id="5697" fill="#19A7FD"></path></svg>
                        <h3>苹果</h3>
                    </div>
                    <div class="opIcon">
                        <svg t="1601971615893" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6544" width="64" height="64"><path d="M409.6 750.933l34.133 68.267H170.667v136.533h682.666V819.2H580.267l34.133-68.267h238.933A68.267 68.267 0 0 1 921.6 819.2v136.533A68.267 68.267 0 0 1 853.333 1024H170.667a68.267 68.267 0 0 1-68.267-68.267V819.2a68.267 68.267 0 0 1 68.267-68.267H409.6zM273.067 68.267h477.866a68.267 68.267 0 0 1 68.267 68.266V614.4a68.267 68.267 0 0 1-68.267 68.267H273.067A68.267 68.267 0 0 1 204.8 614.4V136.533a68.267 68.267 0 0 1 68.267-68.266z m0 68.266V614.4h477.866V136.533H273.067z m614.4 102.4a34.133 34.133 0 0 1 34.133 34.134v204.8a34.133 34.133 0 1 1-68.267 0v-204.8a34.133 34.133 0 0 1 34.134-34.134z m-750.934 0a34.133 34.133 0 0 1 34.134 34.134v204.8a34.133 34.133 0 0 1-68.267 0v-204.8a34.133 34.133 0 0 1 34.133-34.134zM989.867 307.2A34.133 34.133 0 0 1 1024 341.333V409.6a34.133 34.133 0 1 1-68.267 0v-68.267a34.133 34.133 0 0 1 34.134-34.133z m-955.734 0a34.133 34.133 0 0 1 34.134 34.133V409.6A34.133 34.133 0 0 1 0 409.6v-68.267A34.133 34.133 0 0 1 34.133 307.2z m341.334 102.4a51.2 51.2 0 1 0 0-102.4 51.2 51.2 0 0 0 0 102.4z m273.066 0a51.2 51.2 0 1 0 0-102.4 51.2 51.2 0 0 0 0 102.4zM512 0a34.133 34.133 0 0 1 34.133 34.133V102.4a34.133 34.133 0 0 1-68.266 0V34.133A34.133 34.133 0 0 1 512 0z m-68.267 614.4a34.133 34.133 0 0 1 34.134 34.133v136.534a34.133 34.133 0 1 1-68.267 0V648.533a34.133 34.133 0 0 1 34.133-34.133z m136.534 0a34.133 34.133 0 0 1 34.133 34.133v136.534a34.133 34.133 0 1 1-68.267 0V648.533a34.133 34.133 0 0 1 34.134-34.133z" p-id="6545" fill="#19A7FD"></path></svg>
                        <h3>人工智能</h3>
                    </div>
                    <div class="opIcon">
                        <svg t="1601971652934" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7495" width="64" height="64"><path d="M641.561309 479.184617 215.51289 479.184617c-83.508949 0-151.454434-67.927065-151.454434-151.419641 0-20.033265 16.236799-36.275181 36.275181-36.275181 20.039405 0 36.275181 16.242939 36.275181 36.275181 0 43.490513 35.402301 78.868255 78.904071 78.868255l426.048419 0c43.502793 0 78.903048-35.377742 78.903048-78.868255 0-20.033265 16.235776-36.275181 36.275181-36.275181 20.040429 0 36.275181 16.242939 36.275181 36.275181C793.015743 411.256528 725.071282 479.184617 641.561309 479.184617z" p-id="7496" fill="#19A7FD"></path><path d="M640.709919 902.162094 216.364281 902.162094c-83.250052 0-150.98269-67.710125-150.98269-150.947897L65.381591 326.83786c0-83.243913 67.732637-150.97041 150.98269-150.97041l44.789089 0c20.039405 0 36.275181 16.242939 36.275181 36.275181s-16.235776 36.275181-36.275181 36.275181l-44.789089 0c-43.242873 0-78.432327 35.177174-78.432327 78.420047l0 424.376337c0 43.230594 35.189454 78.396511 78.432327 78.396511l424.346661 0c43.242873 0 78.432327-35.165918 78.432327-78.396511L719.143269 326.83786c0-43.24185-35.190477-78.420047-78.432327-78.420047l-56.94085 0c-20.037359 0-36.275181-16.242939-36.275181-36.275181s16.237823-36.275181 36.275181-36.275181l56.94085 0c83.250052 0 150.98269 67.727521 150.98269 150.97041l0 424.376337C791.692608 834.452993 723.959971 902.162094 640.709919 902.162094z" p-id="7497" fill="#19A7FD"></path><path d="M766.470157 754.084571c-20.037359 0-36.273135-16.236799-36.273135-36.275181 0-20.032242 16.235776-36.275181 36.273135-36.275181 66.671469 0 120.92-54.243415 120.92-120.917954 0-66.677609-54.248531-120.918977-120.92-120.918977-20.037359 0-36.273135-16.242939-36.273135-36.275181s16.235776-36.275181 36.273135-36.275181c106.677625 0 193.470363 86.791715 193.470363 193.46934C959.94052 667.291832 873.147782 754.084571 766.470157 754.084571z" p-id="7498" fill="#19A7FD"></path><path d="M366.744243 350.289991c-3.542686 0-7.143701-0.779759-10.54517-2.427282-12.008498-5.832845-17.027815-20.298302-11.206226-32.313963 6.578836-13.785981 19.850094-55.063083 2.208295-79.328743-39.947827-54.920844-1.937119-110.85783-0.295735-113.207341 7.628748-10.975982 22.683628-13.674441 33.665751-6.039553 10.910491 7.592932 13.638625 22.565948 6.14086 33.512255-2.149966 3.212158-19.554358 30.956036-0.402159 57.288774 38.377052 52.760644 3.696182 125.795031 2.208295 128.877229C384.33897 345.270674 375.718639 350.289991 366.744243 350.289991z" p-id="7499" fill="#19A7FD"></path><path d="M487.66322 350.289991c-3.543709 0-7.144724-0.779759-10.54517-2.427282-12.009522-5.832845-17.028838-20.298302-11.208273-32.313963 6.578836-13.785981 19.85214-55.063083 2.208295-79.328743-39.946804-54.920844-1.937119-110.85783-0.294712-113.207341 7.617491-10.975982 22.684652-13.674441 33.665751-6.039553 10.911514 7.592932 13.638625 22.565948 6.14086 33.512255-2.15099 3.212158-19.555381 30.956036-0.402159 57.288774 38.377052 52.760644 3.696182 125.795031 2.208295 128.877229C505.2559 345.270674 496.635569 350.289991 487.66322 350.289991z" p-id="7500" fill="#19A7FD"></path></svg>
                        <h3>趣事</h3>
                    </div>
    
                    <div class="opIcon">
                        <svg t="1601970227749" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2753" width="64" height="64"><path d="M824.888889 630.992593l-122.026667-50.346667a28.444444 28.444444 0 1 0-21.143703 53.57037l60.112592 24.367408-60.112592 27.591111a28.444444 28.444444 0 0 0-14.601482 37.357037A28.918519 28.918519 0 0 0 693.096296 739.555556a15.454815 15.454815 0 0 0 11.377778-3.223704l120.414815-54.992593a28.918519 28.918519 0 0 0 16.213333-25.979259A25.694815 25.694815 0 0 0 824.888889 630.992593zM548.598519 517.30963a28.444444 28.444444 0 0 0-35.745186 17.825185l-61.629629 188.397037a28.444444 28.444444 0 0 0 17.825185 35.745185 17.540741 17.540741 0 0 0 8.154074 1.611852 31.668148 31.668148 0 0 0 27.591111-19.531852l61.724445-188.302222a28.444444 28.444444 0 0 0-17.92-35.745185zM358.684444 597.333333a30.151111 30.151111 0 0 0-37.357037-16.213333L199.111111 630.992593a30.435556 30.435556 0 0 0-17.825185 25.979259A28.444444 28.444444 0 0 0 197.973333 682.666667l120.130371 55.182222a30.056296 30.056296 0 0 0 11.377777 3.223704 28.918519 28.918519 0 0 0 25.97926-16.213334 28.444444 28.444444 0 0 0-14.601482-37.357037l-60.112592-27.591111 60.112592-24.367407c16.213333-7.774815 24.367407-24.082963 17.825185-38.210371z" fill="#19A7FD" p-id="2754"></path><path d="M853.333333 170.666667a56.888889 56.888889 0 0 1 56.888889 56.888889v568.888888a56.888889 56.888889 0 0 1-56.888889 56.888889H170.666667a56.888889 56.888889 0 0 1-56.888889-56.888889V227.555556a56.888889 56.888889 0 0 1 56.888889-56.888889h682.666666m0-56.888889H170.666667A113.777778 113.777778 0 0 0 56.888889 227.555556v568.888888a113.777778 113.777778 0 0 0 113.777778 113.777778h682.666666a113.777778 113.777778 0 0 0 113.777778-113.777778V227.555556a113.777778 113.777778 0 0 0-113.777778-113.777778z" fill="#19A7FD" p-id="2755"></path><path d="M967.111111 365.321481H56.888889v56.888889h910.222222v-56.888889z" fill="#19A7FD" p-id="2756"></path><path d="M224.995556 273.540741m-42.666667 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z" fill="#19A7FD" p-id="2757"></path><path d="M357.451852 273.540741m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z" fill="#19A7FD" p-id="2758"></path><path d="M489.908148 273.540741m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z" fill="#19A7FD" p-id="2759"></path></svg>
                        <h3>前端</h3>
                    </div>
                    <div class="opIcon">
                        <svg t="1601970947489" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3186" width="64" height="64"><path d="M824.888889 383.146667L703.431111 332.8A28.444444 28.444444 0 1 0 682.666667 386.37037l60.112592 24.367408L682.666667 438.328889a28.444444 28.444444 0 0 0-14.601482 37.357037 28.918519 28.918519 0 0 0 25.979259 16.213333 15.454815 15.454815 0 0 0 11.377778-3.223703L824.888889 433.398519A28.918519 28.918519 0 0 0 841.481481 407.703704 25.694815 25.694815 0 0 0 824.888889 383.146667zM549.262222 269.463704a28.444444 28.444444 0 0 0-35.745185 17.825185l-61.724444 188.397037a28.444444 28.444444 0 0 0 17.825185 35.745185 17.540741 17.540741 0 0 0 8.154074 1.611852A31.668148 31.668148 0 0 0 505.362963 493.037037l61.724444-188.302222a28.444444 28.444444 0 0 0-17.825185-35.271111zM359.253333 349.013333A30.151111 30.151111 0 0 0 322.37037 332.8l-122.216296 50.346667a30.435556 30.435556 0 0 0-17.825185 25.979259 28.444444 28.444444 0 0 0 16.213333 25.979259l120.130371 55.182222a30.056296 30.056296 0 0 0 11.377777 3.223704 28.918519 28.918519 0 0 0 25.97926-16.213333A28.444444 28.444444 0 0 0 341.333333 439.940741l-60.112592-27.591111L341.333333 387.982222c16.308148-8.154074 24.462222-24.367407 17.92-38.968889zM580.740741 817.208889H142.222222a28.444444 28.444444 0 0 0 0 56.888889h438.518519a28.444444 28.444444 0 1 0 0-56.888889z" fill="#19A7FD" p-id="3187"></path><path d="M910.222222 134.542222v512H113.777778v-512h796.444444m0-56.888889H113.777778a56.888889 56.888889 0 0 0-56.888889 56.888889v512a56.888889 56.888889 0 0 0 56.888889 56.888889h796.444444a56.888889 56.888889 0 0 0 56.888889-56.888889v-512a56.888889 56.888889 0 0 0-56.888889-56.888889zM881.777778 817.208889H748.468148a28.444444 28.444444 0 0 0 0 56.888889H881.777778a28.444444 28.444444 0 0 0 0-56.888889z" fill="#19A7FD" p-id="3188"></path><path d="M666.642963 946.346667a100.693333 100.693333 0 1 1 100.693333-100.693334 100.882963 100.882963 0 0 1-100.693333 100.693334z m0-144.592593a43.804444 43.804444 0 1 0 43.899259 43.899259 43.899259 43.899259 0 0 0-43.899259-43.899259z" fill="#19A7FD" p-id="3189"></path></svg>
                        <h3>后端</h3>
                    </div>
                    <div class="opIcon">
                        <svg t="1601971002439" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4540" width="64" height="64"><path d="M963.615 347.084q23.342 0 39.58 14.716t16.238 36.028v299.385q0 20.297-16.238 35.013t-39.58 14.716h-18.267q-23.342 0-39.58-14.716t-16.238-35.013V397.828q0-21.313 16.238-36.028t39.58-14.716h18.267z m-823.056 0q23.342 0 38.565 14.716t15.223 36.028v299.385q0 20.297-15.223 35.013t-38.565 14.716h-18.268q-23.342 0-39.58-14.716t-16.237-35.013V397.828q0-21.313 16.238-36.028t39.58-14.716h18.267z m560.206-235.449q18.268 8.12 38.058 22.327t38.057 33.49 31.968 42.118 19.79 48.206H252.194q16.238-53.788 51.251-88.293t70.533-54.803L322.22 33.49q-2.03-2.03-0.507-7.61t10.656-11.672q8.119-7.104 15.223-6.597t9.133 2.538L409.5 93.368q28.416-13.194 59.877-20.298t64.951-7.104q69.011 0 128.888 28.417l53.788-84.234q2.03-2.03 7.611-2.03t16.746 6.09q10.148 5.073 11.67 9.133t-0.507 6.09z m-283.148 87.279q13.194 0 22.327-9.134t9.134-22.327-9.134-22.327-22.327-9.134-22.327 9.134-9.133 22.327 9.133 22.327 22.327 9.134z m249.658-4.06q13.193 0 22.327-9.133t9.133-22.328-9.133-22.327-22.327-9.133-22.328 9.133-9.133 22.327 9.133 22.328 22.328 9.133z m161.363 126.859l1.015 456.69q0 22.326-14.715 37.55t-36.028 15.222h-14.208v142.082q0 20.297-14.716 35.52T713.958 1024h-29.43q-20.298 0-35.014-15.223t-14.715-35.52V831.175H448.063v142.082q0 20.297-14.715 35.52T397.32 1024H367.89q-20.297 0-35.013-15.223t-14.715-35.52V831.175h-11.164q-21.312 0-36.028-15.223t-14.715-37.55v-456.69h572.384z" fill="#19A7FD" p-id="4541"></path></svg>
                        <h3>安卓</h3>
                    </div>
                    <div class="opIcon">
                        <svg t="1601971509856" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5695" width="64" height="64"><path d="M755.472961 545.648638c-1.125612-166.078945 92.197861-170.376736 96.393325-173.037274-52.494454-76.746278-134.152493-88.821025-163.21375-89.946637-69.480963-7.060658-135.58509 40.112721-170.888378 40.112721-35.200959 0-89.639652-40.215049-147.250525-39.191766-75.722994 1.125612-145.613271 43.898871-184.702708 111.74258-78.690517 136.608374-20.158689 338.911562 56.587589 449.630858 37.452183 54.234036 82.169681 115.119416 140.906166 112.970521 56.48526-2.251224 77.87189-36.633557 146.227241-36.633557s87.490756 36.633557 147.352853 35.405616c60.783052-1.125612 99.360847-55.25732 136.506046-109.696013 43.080244-62.931948 60.783052-120.747477 61.806336-123.817328-1.330269-0.61397-118.598581-66.820426-119.826521-177.539722L755.472961 545.648638 755.472961 545.648638z" p-id="5696" fill="#19A7FD"></path><path d="M511.829112 288.395115c0-123.203358 99.872489-223.178175 223.178175-223.178175C735.007287 188.522626 635.032469 288.395115 511.829112 288.395115z" p-id="5697" fill="#19A7FD"></path></svg>
                        <h3>苹果</h3>
                    </div>
                    <div class="opIcon">
                        <svg t="1601971615893" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6544" width="64" height="64"><path d="M409.6 750.933l34.133 68.267H170.667v136.533h682.666V819.2H580.267l34.133-68.267h238.933A68.267 68.267 0 0 1 921.6 819.2v136.533A68.267 68.267 0 0 1 853.333 1024H170.667a68.267 68.267 0 0 1-68.267-68.267V819.2a68.267 68.267 0 0 1 68.267-68.267H409.6zM273.067 68.267h477.866a68.267 68.267 0 0 1 68.267 68.266V614.4a68.267 68.267 0 0 1-68.267 68.267H273.067A68.267 68.267 0 0 1 204.8 614.4V136.533a68.267 68.267 0 0 1 68.267-68.266z m0 68.266V614.4h477.866V136.533H273.067z m614.4 102.4a34.133 34.133 0 0 1 34.133 34.134v204.8a34.133 34.133 0 1 1-68.267 0v-204.8a34.133 34.133 0 0 1 34.134-34.134z m-750.934 0a34.133 34.133 0 0 1 34.134 34.134v204.8a34.133 34.133 0 0 1-68.267 0v-204.8a34.133 34.133 0 0 1 34.133-34.134zM989.867 307.2A34.133 34.133 0 0 1 1024 341.333V409.6a34.133 34.133 0 1 1-68.267 0v-68.267a34.133 34.133 0 0 1 34.134-34.133z m-955.734 0a34.133 34.133 0 0 1 34.134 34.133V409.6A34.133 34.133 0 0 1 0 409.6v-68.267A34.133 34.133 0 0 1 34.133 307.2z m341.334 102.4a51.2 51.2 0 1 0 0-102.4 51.2 51.2 0 0 0 0 102.4z m273.066 0a51.2 51.2 0 1 0 0-102.4 51.2 51.2 0 0 0 0 102.4zM512 0a34.133 34.133 0 0 1 34.133 34.133V102.4a34.133 34.133 0 0 1-68.266 0V34.133A34.133 34.133 0 0 1 512 0z m-68.267 614.4a34.133 34.133 0 0 1 34.134 34.133v136.534a34.133 34.133 0 1 1-68.267 0V648.533a34.133 34.133 0 0 1 34.133-34.133z m136.534 0a34.133 34.133 0 0 1 34.133 34.133v136.534a34.133 34.133 0 1 1-68.267 0V648.533a34.133 34.133 0 0 1 34.134-34.133z" p-id="6545" fill="#19A7FD"></path></svg>
                        <h3>人工智能</h3>
                    </div>
                    <div class="opIcon">
                        <svg t="1601971652934" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7495" width="64" height="64"><path d="M641.561309 479.184617 215.51289 479.184617c-83.508949 0-151.454434-67.927065-151.454434-151.419641 0-20.033265 16.236799-36.275181 36.275181-36.275181 20.039405 0 36.275181 16.242939 36.275181 36.275181 0 43.490513 35.402301 78.868255 78.904071 78.868255l426.048419 0c43.502793 0 78.903048-35.377742 78.903048-78.868255 0-20.033265 16.235776-36.275181 36.275181-36.275181 20.040429 0 36.275181 16.242939 36.275181 36.275181C793.015743 411.256528 725.071282 479.184617 641.561309 479.184617z" p-id="7496" fill="#19A7FD"></path><path d="M640.709919 902.162094 216.364281 902.162094c-83.250052 0-150.98269-67.710125-150.98269-150.947897L65.381591 326.83786c0-83.243913 67.732637-150.97041 150.98269-150.97041l44.789089 0c20.039405 0 36.275181 16.242939 36.275181 36.275181s-16.235776 36.275181-36.275181 36.275181l-44.789089 0c-43.242873 0-78.432327 35.177174-78.432327 78.420047l0 424.376337c0 43.230594 35.189454 78.396511 78.432327 78.396511l424.346661 0c43.242873 0 78.432327-35.165918 78.432327-78.396511L719.143269 326.83786c0-43.24185-35.190477-78.420047-78.432327-78.420047l-56.94085 0c-20.037359 0-36.275181-16.242939-36.275181-36.275181s16.237823-36.275181 36.275181-36.275181l56.94085 0c83.250052 0 150.98269 67.727521 150.98269 150.97041l0 424.376337C791.692608 834.452993 723.959971 902.162094 640.709919 902.162094z" p-id="7497" fill="#19A7FD"></path><path d="M766.470157 754.084571c-20.037359 0-36.273135-16.236799-36.273135-36.275181 0-20.032242 16.235776-36.275181 36.273135-36.275181 66.671469 0 120.92-54.243415 120.92-120.917954 0-66.677609-54.248531-120.918977-120.92-120.918977-20.037359 0-36.273135-16.242939-36.273135-36.275181s16.235776-36.275181 36.273135-36.275181c106.677625 0 193.470363 86.791715 193.470363 193.46934C959.94052 667.291832 873.147782 754.084571 766.470157 754.084571z" p-id="7498" fill="#19A7FD"></path><path d="M366.744243 350.289991c-3.542686 0-7.143701-0.779759-10.54517-2.427282-12.008498-5.832845-17.027815-20.298302-11.206226-32.313963 6.578836-13.785981 19.850094-55.063083 2.208295-79.328743-39.947827-54.920844-1.937119-110.85783-0.295735-113.207341 7.628748-10.975982 22.683628-13.674441 33.665751-6.039553 10.910491 7.592932 13.638625 22.565948 6.14086 33.512255-2.149966 3.212158-19.554358 30.956036-0.402159 57.288774 38.377052 52.760644 3.696182 125.795031 2.208295 128.877229C384.33897 345.270674 375.718639 350.289991 366.744243 350.289991z" p-id="7499" fill="#19A7FD"></path><path d="M487.66322 350.289991c-3.543709 0-7.144724-0.779759-10.54517-2.427282-12.009522-5.832845-17.028838-20.298302-11.208273-32.313963 6.578836-13.785981 19.85214-55.063083 2.208295-79.328743-39.946804-54.920844-1.937119-110.85783-0.294712-113.207341 7.617491-10.975982 22.684652-13.674441 33.665751-6.039553 10.911514 7.592932 13.638625 22.565948 6.14086 33.512255-2.15099 3.212158-19.555381 30.956036-0.402159 57.288774 38.377052 52.760644 3.696182 125.795031 2.208295 128.877229C505.2559 345.270674 496.635569 350.289991 487.66322 350.289991z" p-id="7500" fill="#19A7FD"></path></svg>
                        <h3>趣事</h3>
                    </div>
                </div>
                
            </div>
            <div class="opright">
                <span class="oplefticon op">
                    <svg t="1601969646454" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1810" width="24" height="24"><path d="M230.836828 464.543575C379.00482 321.294916 527.16677 178.056327 675.323687 34.957685c61.007388-59.03603 151.958678 36.828551 90.667365 96.008557C634.135595 258.462159 502.280138 385.819135 370.496165 513.319079c132.486735 131.850423 264.97347 263.849857 397.532696 395.705314 60.304626 60.023723-30.643643 155.890318-90.734822 95.937073C528.424291 856.872006 379.636097 708.711062 230.836828 560.548104 206.240161 535.951436 205.603848 488.856319 230.836828 464.543575L230.836828 464.543575zM230.836828 464.543575" p-id="1811" fill="#ffffff"></path></svg>
                </span>
            </div>
        </div>
    </div>
    <div id="article">
        <div class="articleTitle">
            讨论
            <div class='articleTitles'><a href="">探索更多</a></div>
        </div>
        <div class="articles">
            <div class="atLeft">
                <div class="atImg1">
                    <img src="upload/t_01.png" alt="">
                </div>
                <div class="atText">
                    <div class="atTexta">
                        <a href="">我知道了 我知道了我知道了 我知道了我知道了 我知道了</a>
                    </div>
                    <div class='atWriter'>By <a href="">luhao</a> · 02.23.2019 · 400次浏览</div>
                </div>
            </div>
            <div class="atRight">
                <div class="atdivs">
                    <div class="atImg2">
                        <img src="upload/t_02.png" alt="">
                    </div>
                    <div class='atText2'>
                        <div class="atTextp">前端</div>
                        <div class="atTexta">
                            <a href="">我这个真知道了，这个吧真知道,不偏你！111111122222</a>
                        </div>
                        <div class='atWriter'>By <a href="">luhao</a> · 02.23.2019 · 400次浏览</div>
                    </div>
                </div>
                <div class="atdivs">
                    <div class="atImg2">
                        <img src="upload/t_03.png" alt="">
                    </div>
                    <div class='atText2'>
                        <div class="atTextp">后端</div>
                        <div class="atTexta">
                            <a href="">我这个真知道了，这个吧真知道,不偏你！111111122222</a>
                        </div>
                        <div class='atWriter'>By <a href="">luhao</a> · 02.23.2019 · 400次浏览</div>
                    </div>
                </div>
                <div class="atdivs">
                    <div class="atImg2">
                        <img src="upload/t_04.png" alt="">
                    </div>
                    <div class='atText2'>
                        <div class="atTextp">前端</div>
                        <div class="atTexta">
                            <a href="">我这个真知道了，这个吧真知道,不偏你！111111122222</a>
                        </div>
                        <div class='atWriter'>By <a href="">luhao</a> · 02.23.2019 · 400次浏览</div>
                    </div>
                </div>
                <div class="atdivs">
                    <div class="atImg2">
                        <img src="upload/t_06.png" alt="">
                    </div>
                    <div class='atText2'>
                        <div class="atTextp">前端</div>
                        <div class="atTexta">
                            <a href="">我这个真知道了，这个吧真知道,不偏你！111111122222</a>
                        </div>
                        <div class='atWriter'>By <a href="">luhao</a> · 02.23.2019 · 400次浏览</div>
                    </div>
                </div>
                
            </div>
        </div>
        
    </div>
    <div id="button">
        <div class="buttons">
            <div class="buttonLogo">
                <img src="images/知遇1.png" alt="">
                <p>让知识遇见更好的自己</p>
            </div>
            <div class="buttonText">
                <p>©知遇版权所有</p>
            </div>
            <div class='buttonHerf'>
                <li><a href="">闲 嗑</a> </li>
                <li><a href="">专 栏</a></li>
                <li><a href="">社 区</a></li>
                <li><a href="">书 店</a></li>
            </div>
            <div class="buttonJoin">
                <a href="">登录/注册</a>
            </div>
        </div>
    </div>
    
</body>
</html>